<template>
  <div class="container">
    {{ message }}
    <input type="text" v-model.lazy="message">
    <button @click="destroyApp">销毁</button>
  </div>
</template>

<script>
import {onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, ref} from "vue";//引入ref实现响应式
export default {
  name: 'App',
  components: {},
  setup() {
    console.log('setup')
    //Vue3的生命周期中,beforeCreate和Created在setup中完成
    let message = ref('Vue生命周期')
    onBeforeMount(() => {
      console.log('onBeforeMount')
    })
    onMounted(() => {
      console.log('onMounted')
    })
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate')
    })
    onUpdated(() => {
      console.log('onUpdated')
    })
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount')
    })
    onUnmounted(() => {
      console.log('onUnmounted')
    })


    function destroyApp() {
    }

    return {
      message, destroyApp
    }
  },


  //vue2的生命周期
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  //beforeCreate和created相当于setup
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  beforeUnmount() {
    console.log('beforeUnmount')
  },
  unmounted() {
    console.log('unmounted')
  }


}
</script>

<style>
.container {
  width: 200px;
  background-color: gray;
  margin: auto;
}
</style>
